<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="Content-Language" content="en"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <meta name="keywords"
          content="unity, game, 3d, cube, room, interior, design"/>
    <meta name="author" content="Sorumi">
    <title>CubeRoom</title>
    <link rel="shortcut icon" href="imgs/favicon.png"/>
    <link rel="stylesheet" href="css/index.css"/>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/pretty-checkbox@3.0/dist/pretty-checkbox.min.css">

</head>
<body>

<header>
    <div class="container">

        <img class="icon" src="imgs/logo_alpha.png" width="100">
        <h1>CUBE ROOM <span class="sub">WIP</span></h1>

        <p>An interior design game by Unity3D.</p>
        <a class="github" href="https://github.com/Sorumi/CubeRoom">View in GitHub</a>
    </div>
</header>

<main class="container">
    <div class="wrapper video">
        <h1>Video</h1>
        <video class="video" src="videos/intro.mp4" controls="true" type="video/mp4'">
        </video>
    </div>
    <div class="wrapper">
        <h1>Design Draft</h1>
        <img src="imgs/design_draft.png">
    </div>
    <div class="wrapper progress">
        <h1>Progress</h1>
        <div class="content">
            <div class="progress-section">
                <h2>Features</h2>
                <div class="pretty p-default p-curve p-thick">
                    <input type="checkbox" disabled checked/>
                    <div class="state">
                        <label>Place objects vertically or horizontally</label>
                    </div>
                </div>
                <div class="pretty p-default p-curve p-thick">
                    <input type="checkbox" disabled/>
                    <div class="state">
                        <label>Nesting objects</label>
                    </div>
                </div>
                <div class="pretty p-default p-curve p-thick">
                    <input type="checkbox" disabled/>
                    <div class="state">
                        <label>Workshop for customizing objects</label>
                    </div>
                </div>
            </div>

            <div class="progress-section">
                <h2>Graphics</h2>
                <div class="pretty p-default p-curve p-thick">
                    <input type="checkbox" disabled checked/>
                    <div class="state">
                        <label>Colored shadow</label>
                    </div>
                </div>
                <div class="pretty p-default p-curve p-thick">
                    <input type="checkbox" disabled checked/>
                    <div class="state">
                        <label>Transparent shader</label>
                    </div>
                </div>
                <div class="pretty p-default p-curve p-thick">
                    <input type="checkbox" disabled checked/>
                    <div class="state">
                        <label>Physically-inspired Shader</label>
                    </div>
                </div>
                <div class="pretty p-default p-curve p-thick">
                    <input type="checkbox" disabled/>
                    <div class="state">
                        <label>Refraction shader</label>
                    </div>
                </div>
                <div class="pretty p-default p-curve p-thick">
                    <input type="checkbox" disabled/>
                    <div class="state">
                        <label>Realtime planar reflection</label>
                    </div>
                </div>
                <div class="pretty p-default p-curve p-thick">
                    <input type="checkbox" disabled/>
                    <div class="state">
                        <label>Godray / Volumetric lighting</label>
                    </div>
                </div>
            </div>
            <div class="progress-section">
                <h2>System</h2>
                <div class="pretty p-default p-curve p-thick">
                    <input type="checkbox" disabled checked/>
                    <div class="state">
                        <label>Touch system</label>
                    </div>
                </div>
                <div class="pretty p-default p-curve p-thick">
                    <input type="checkbox" disabled/>
                    <div class="state">
                        <label>Recourse and bundle manager</label>
                    </div>
                </div>
                <div class="pretty p-default p-curve p-thick">
                    <input type="checkbox" disabled/>
                    <div class="state">
                        <label>Serialization storage</label>
                    </div>
                </div>
            </div>

            <div class="progress-section">
                <h2>Tools</h2>
                <div class="pretty p-default p-curve p-thick">
                    <input type="checkbox" disabled checked/>
                    <div class="state">
                        <label>Thumbnail generation tool</label>
                    </div>
                </div>
                <div class="pretty p-default p-curve p-thick">
                    <input type="checkbox" disabled checked/>
                    <div class="state">
                        <label>CSV tool</label>
                    </div>
                </div>
            </div>

        </div>
    </div>


</main>

<footer>
    <div class="container">
        <p>Crafted with ❤ by <a href="http://sorumi.xyz/">Sorumi</a></p>
    </div>
</footer>

</body>
</html>
